import React from 'react';
import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom';
import { Button } from 'antd';
import ReactReduxTodoList from './pages/ReactReduxTodoList';
import ReduxTodoList from './pages/ReduxTodoList';
import TodoList from './pages/Todolist';
import Transition from './pages/Transition';
import Table from './pages/AntdTable';

const Routers = () => {
	return (
		<div>
			<BrowserRouter>
				<nav style={{padding: "20px"}}>
					<Link to="/react-redux-todolist" style={{marginRight: "20px"}}>
						<Button type="ghost">react-redux-todolist</Button>
					</Link>
					<Link to="/redux-todolist" style={{marginRight: "20px"}}>
						<Button type="primary">redux-todolist</Button>
					</Link>
					<Link to="/todolist" style={{marginRight: "20px"}}>
						<Button type="default">todolist</Button>
					</Link>
					<Link to="/transition" style={{marginRight: "20px"}}>
						<Button type="dashed">transition</Button>
					</Link>
					<Link to="/table">
						<Button type="danger">table</Button>
					</Link>
				</nav>
				<Route path="/react-redux-todolist" component={ ReactReduxTodoList } />
				<Route path="/redux-todolist" component={ ReduxTodoList } />
				<Route path="/todolist" component={ TodoList } />
				<Route path="/transition" component={ Transition } />
				<Route path="/table" component={ Table } />
				<Redirect to="/react-redux-todolist" />
			</BrowserRouter>
		</div>
	)
}

export default Routers;

